<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/7
  Time: 16:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <!--    表头-->
    <el-form :inline="true" :model="branchSearchForm" class="demo-form-inline">

        <el-form-item label="">
            <el-select v-model="branchSearchForm.branchid" placeholder="部门">
                <el-option  label="请选择你的店铺"  value=""></el-option>
                <el-option v-for="d in branchSearch" :label="d.branchname" :value="d.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="branchup">查询</el-button>
        </el-form-item>
    </el-form>

    <%--   主表头部按钮 --%>
    <el-button type="success" @click="newGoods">刷新</el-button>

    <%-- 主体表格--%>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
            :cell-style="tableCellStyle"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="cid"
                label="出库编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="outname"
                label="出库人"
                width="150">
        </el-table-column>
        <el-table-column
                prop="outtime"
                label="出库时间"
                width="200">
        </el-table-column>
        <el-table-column
                prop="examname"
                label="审核人"
                width="200">
        </el-table-column>
        <el-table-column
                prop="examtime"
                label="审核时间"
                width="200">
        </el-table-column>
        <el-table-column
                prop="outmethod"
                label="出库方式"
                width="150">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.outmethod==1"
                        effect="dark">
                    零售出库
                </el-tag>
                <el-tag
                        type=""
                        v-if="scope.row.outmethod==2"
                        effect="dark">
                    批量出库
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="examstate"
                label="审核状态"
                width="150">
            <template slot-scope="scope">
                <el-tag
                        type="warning"
                        v-if="scope.row.examstate==1"
                        effect="dark">
                    审核中
                </el-tag>
                <el-tag
                        type="success"
                        v-if="scope.row.examstate==2"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        type="danger"
                        v-if="scope.row.examstate==3"
                        effect="dark">
                    审核驳回
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="所属分店"
                width="180">
        </el-table-column>
        <el-table-column
                prop="remarks"
                label="驳回理由"
                width="180">
        </el-table-column>
        <el-table-column
                label="详细"
                width="150">
            <template slot-scope="scope">
                <el-button
                        @click.native.prevent="upRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                    <el-tag
                            key="详细操作"
                            type='success'
                            effect="dark">
                        详细操作
                    </el-tag>
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页组件：
              @size-change:触发 改变每页显示的记录条数
              @current-change: 改变页码时触发的函数
              current-page: 显示的当前页面
              page-sizes: 页面大小的下拉框
              page-size: 默认每页显示的条数
              total: 总条数
         -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <%--    详细信息弹出层--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="70%"
            :before-close="handleClose">
        <el-table
                :data="tableData1"
                border
                style="width: 100%">
            <el-table-column
                    prop="cid"
                    label="入库详情ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goodsname"
                    label="商品名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="出库数量">
            </el-table-column>
            <el-table-column
                    prop="sprice"
                    label="售价">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="总价">
            </el-table-column>
        </el-table>

    </el-dialog>


</div>

<script>
    let app = new Vue({
        el: "#app",
        data: {
          //入库信息主表的内容
          tableData:[],
          //勾选的数据
          multipleSelection:[],
          //入库信息表头输入框
          branchSearchForm:{},
          //店铺数据
          branchSearch:[],
          //当前页面
          currentPage:1,
          //页面大小
          pageSize:5,
          //总条数
          total:0,

          //详细消息弹出层
          //隐藏
          dialogVisible:false,
          //数据
          tableData1:[],
        },
        created(){
            //  初始化商品表格
            this.init();
            this.headselect();
        },
        methods:{
            //新增入库弹出层
            init(){
                this.dialogVisible2=true;
                axios.post("/Oc/main?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.branchSearchForm).then(function (resp){
                    console.log(resp)
                    app.tableData=resp.data.data.list;
                    app.total=resp.data.data.total
                })
            },
            //改变页面数据数量
            handleSizeChange(val){
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.init();
            },
            //改变当前 页面的函数
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.init();
            },
            //表头查询按钮
            branchup(){
                this.init();
            },
            //表头店铺选择下拉框
            headselect(){
                axios.get("/brand/info").then(function (resp){
                    app.branchSearch=resp.data.data
                })
            },
            //刷新按钮
            newGoods(){
                this.init();
            },
            //选择的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //详细操作
            upRow(index, tableData){
                this.dialogVisible=true;
                axios.post("/Oc/find?cid="+this.tableData[index].cid).then(function (resp){
                    console.log(resp)
                    app.tableData1=resp.data.data
                })

            },
            // 改变某一列单元格背景颜色
            tableCellStyle({ row, column, rowIndex, columnIndex }) {
                let rowBackground = {};

                if (row.taskColor) {
                    if (columnIndex === 2) {
                        rowBackground.background = row.taskColor;
                    } else {
                        rowBackground.background = "#f8f8f8";
                    }
                } else {
                    rowBackground.background = "#ffffff";
                }
                return rowBackground;
            },
            //确认关闭
            handleClose(done) {
                done();
            },
        }
    })
</script>
</body>
</html>
